<template>
	<div class="app-container">
		<el-form :inline="true" :model="dataForm" @submit.native.prevent @keyup.enter.native="getDataList()">
		  <el-form-item>
		    <el-input placeholder="请输入供应商名称搜索" v-model="dataForm.supplierName" :clearable="true" size="mini">
		      <template slot="prepend">供应商名称</template>
		    </el-input>
		  </el-form-item>

		  <el-form-item>
		    <el-button v-if="isAuth('base:supplier:list')" type="primary" class="pan-btn primary-btn" size="mini" @click="searchData()" icon="el-icon-search">搜索</el-button>
		  </el-form-item>

		  <el-form-item>
		    <el-button v-if="isAuth('base:supplier:save')" @click="addModule()" type="success" class="pan-btn success-btn" size="mini" icon="el-icon-upload">新增</el-button>
		  </el-form-item>

		  <el-form-item>
		    <el-button v-if="isAuth('base:supplier:delete')" @click="deleteData()" type="danger" class="pan-btn danger-btn" size="mini" icon="el-icon-delete">删除</el-button>
		  </el-form-item>
		</el-form>
		<el-table
			:data="dataList"
			v-loading="dataListLoading"
			border
      fit
      highlight-current-row
			@selection-change="selectionChange"
		  style="width: 100%">
		<el-table-column
		  type="selection"
		  header-align="center"
		  align="center"
		  width="50">
		</el-table-column>
		<el-table-column
			prop="supplierId"
			header-align="center"
			align="center"
			label="供应商编号">
		</el-table-column>
		<el-table-column
			prop="supplierName"
			header-align="center"
			align="center"
			label="供应商名称">
		</el-table-column>
		<el-table-column
		    fixed="right"
		    header-align="center"
		    align="center"
		    label="操作"
		  >
		    <template slot-scope="scope">
		      <el-button v-if="isAuth('base:supplier:update')" type="text" size="small" @click="updateData(scope.row)">修改</el-button>
		      <el-button v-if="isAuth('base:supplier:delete')" type="text" size="small" @click="deleteData(scope.row.supplierId)">删除</el-button>
		    </template>
		  </el-table-column>
		</el-table>
		<el-pagination
		  @size-change="sizeChangeHandle"
		  @current-change="currentChangeHandle"
		  :current-page="pageIndex"
		  :page-sizes="[10, 20, 50, 100]"
		  :page-size="pageSize"
		  :total="totalPage"
		  layout="total, sizes, prev, pager, next, jumper"
		></el-pagination>

		<add-or-update-module
			v-if="addModuleVisible"
			@close="addModule"
			@refreshData="getDataList"
			:childDataForm="childDataForm"
			></add-or-update-module>
	</div>
</template>

<script>
	import { getSupplierList,deleteSupplier } from "@/api/supplier"
	import CommonMethod from '@/views/mixin/common'
	import { CODE_OK } from '@/common/js/config'
	import AddOrUpdateModule from './supplier-addorupdatemodule'
	export default{
    name: 'gongyingshang',
		mixins: [CommonMethod],
		data() {
			return {
		    dataForm: {},
		    dataList: [],
		    pageIndex: 1,
		    pageSize: 10,
		    totalPage: 0,
		    dataListLoading: false,
		    selectionList: [],
				addModuleVisible: false,
				childDataForm: ''
		  }
		},
		components: {
			AddOrUpdateModule
		},
		mounted() {
			if (this.isAuth('base:supplier:list')){
				this.getDataList()
			}
		},
		methods: {
			searchData() {
				this.pageIndex=1
				this.getDataList()
			},
			getDataList() {
				this.dataListLoading = true
				const params = {
					page: this.pageIndex,
				  limit: this.pageSize,
					supplierName: this.dataForm.supplierName || null
				}
				getSupplierList(params).then(res => {
					if (res.code === CODE_OK) {
						this.dataList = res.page.list
						this.totalPage = res.page.totalCount
					}else{
						this.$message.error(res.msg)
					}
					this.dataListLoading = false
				}).catch()
			},
			deleteData(id) {
				if (this.selectionList.length == 0 && id == undefined) {
					this.$message.error('请选择至少一个供应商')
					return
				}
				let ids = id ? [id] : this.selectionList.map(item => {
					return item.supplierId
				})
				let msg = id ? '此操作将永久删除此供应商, 是否继续?' : '此操作将永久删除选中的供应商, 是否继续?'
				this.$confirm(msg, '提示', {
			    confirmButtonText: '确定',
			    cancelButtonText: '取消',
			    type: 'warning'
			 	}).then(() => {
			 		deleteSupplier(ids).then(res => {
			 			if (res.code === CODE_OK) {
			 				this.$message({
			          type: 'success',
			          message: '删除成功!'
			        })
			 				this.getDataList()
			 			}else{
			 				this.$message.error(res.msg)
			 			}
			 		})
			  })
			},
			updateData(row) {
				this.childDataForm = row
				this.addModuleVisible = !this.addModuleVisible
			},
			addModule() {
				this.childDataForm = ""
				this.addModuleVisible = !this.addModuleVisible
			},
			selectionChange(obj) {
				this.selectionList = obj
			}
		}
	}
</script>

<style scoped>
  >>> .el-form-item__content {
    line-height: normal;
  }
</style>
